<template>
  <el-container style='display: flex'>
    <el-aside>
      <el-menu :default-openeds = '["1", "3"]'>
        <el-submenu index='1'>
          <template slot='title'
            ><i class='el-icon-message'></i>七星彩</template
          >
          <el-menu-item-group>
            <template slot='title'>趋势图</template>
            <el-menu-item index='1-1'>线性趋势</el-menu-item>
            <el-menu-item index='1-2'>概率趋势</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title='预测值'>
            <el-menu-item index='1-3'>预测值</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-main>
      <div id='line' style='width: 100%; height: 500px'></div>
    </el-main>
  </el-container>
</template>
<style>
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  width: 100%;
}
</style>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  data () {
    return {
      info: null,
      options: {
        title: {
          text: '七星彩'
        },
        tooltip: {},
        legend: {
          data: ['value']
        },
        xAxis: {
          data: ['1', '2', '3', '4', '5', '7']
        },
        yAxis: {},
        series: [
          {
            name: '位置0',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '位置2',
            type: 'line',
            data: [1, 30, 16, 17, 19, 26]
          }
        ]
      },
      lottery_url: 'http://127.0.0.1:8000/lottery_ticket'
    }
  },
  methods: {
    drawLine (id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption(this.options)
    },
    get_lottery_ticket () {
      axios
        .get('/apislottery_ticket' + '/' + 'tendency/', {
          params: {
            ticket: '七星彩',
            probability: 'line',
            start: '2022-03-10',
            end: '2022-03-20'}
        })
        .then(response => {
          this.info = response
          this.options.xAxis.data = this.info.data.value.tm
          this.options.series = this.info.data.value.data
          this.drawLine('line')
        })
    },
    update_db () {
      axios.get('/apis/lottery_ticket' + '/' + 'db_status/')
        .then(response => {
          console.log(response)
        })
    }
  },
  mounted () {
    this.update_db()
    this.get_lottery_ticket()
  }
}
</script>
